<template>
  <div class="page-container">
    <div class="search">
      <el-form ref="searchParams" :inline="true" :model="searchParams" label-width="70px">
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="searchParams.phoneNum" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="handleSearch">搜索</el-button>
          <el-button size="small" @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="content-table">
      <el-table v-loading="loading" :data="phoneData">
        <el-table-column align="center" label="序号" width="50">
          <template v-slot="scope">{{ scope.$index + (searchParams.pageNum - 1) * searchParams.pageSize + 1
          }}</template>
        </el-table-column>
        <el-table-column align="center" label="联系人">
          <template v-slot="scope">
            联系人
          </template>
        </el-table-column>
        <el-table-column align="center" label="手机号" prop="phone">
          <template v-slot="scope">
            {{ scope.row.phoneNum }}
          </template>
        </el-table-column>
        <el-table-column align="center" class-name="small-padding fixed-width" label="操作">
          <template v-slot="scope">
            <el-button size="small" type="text" @click="handleEdit(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-wrapper">
        <pagination v-show="total > 0" :limit.sync="searchParams.pageSize" :page.sync="searchParams.pageNum"
          :total="total" @pagination="getContactPhone" />
      </div>
    </div>
    <el-dialog title="编辑" :visible.sync="dialogVisible" width="30%" :before-close="handleClose"
      :close-on-click-modal="false" :close-on-press-escape="false">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="手机号" prop="phone" v-model="form.phone">
          <el-input v-model="form.phoneNum" placeholder="请输入手机号">
          </el-input>
        </el-form-item>
      </el-form>

      <div style="text-align:center;margin-top:32px;">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="submitForm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getContactPhoneList, updateContactPhone } from '@/api/messageManagement/messageManagement'

export default {
  name: 'contactUs',
  components: {

  },
  data() {
    return {
      userPhone: '',
      searchParams: {
        pageNum: 1,
        pageSize: 10,
      },
      phoneData: [],
      loading: true,
      total: 0,
      form: {
        phoneNum: '',
      },
      dialogVisible: false,
    }
  },
  computed: {

  },
  async mounted() {
    await this.getContactPhone()
  },
  methods: {
    async handleSearch() {
      this.searchParams.pageNum = 1
      await this.getContactPhone()
    },
    handleReset() {
      this.searchParams.phoneNum = ''
      this.getContactPhone()
    },
    //获取联系人电话
    async getContactPhone() {
      this.loading = true
      let res = await getContactPhoneList(this.searchParams)
      this.phoneData = res.rows
      this.total = res.total
      console.log(res)
      // this.userPhone = (res && res.data) ? res.data : []
      this.loading = false
    },

    //编辑
    async handleEdit(row) {
      console.log(row)
      this.dialogVisible = true
      this.form = {
        phoneNum: row.phoneNum
      }
    },
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.loading = true
          updateContactPhone(this.form).then(res => {
            if (res.code === 200) {
              this.$message.success('修改成功')
              this.dialogVisible = false
              this.resetForm()
              this.getContactPhone()
            } else {
              this.$message.error('修改失败')
            }
            this.loading = false
          }).catch(err => {
            this.$message.error('修改失败')
            this.loading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleClose() {
      this.dialogVisible = false
      this.resetForm()
    },
    resetForm() {
      this.$nextTick(() => {
        if (this.$refs.form) {
          this.$refs.form.resetFields()
        }
      })
    },
    created() {

    }
  }
}
</script>


<style lang="scss" scoped>
$--font-path: '~element-ui/lib/theme-chalk/fonts';
@import "~element-ui/packages/theme-chalk/src/index.scss";
@import '@/assets/styles/customGlobal.scss';

.search {
  background: #fff;
  border-radius: 10px;
  padding: 15px 15px 0px 15px;
}

.content-table {
  margin-top: 20px;
  padding: 20px;
  box-sizing: border-box;
  background: #fff;
  border-radius: 10px;

  .contentBtn {
    display: flex;
    margin-bottom: 20px;
  }
}

.tableColumn {
  width: 100%;
  line-height: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.tableColumn:hover {
  color: #359eff;
}
</style>
